﻿<html>
<head>
    <style type="text/css">
        body
        {
            background-color: white;
            color: black;
            font-family: Lucida grande, arial, sans-serif;
            font-size: 13px;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            width: auto;
            padding: 0px !important;
            margin: 0px !important;
            border: none !important;
        }
        #menu
        {
            width: 150px;
            display: block;
            padding: 0px;
            background-color: white;
        }
        .button
        {
            width: 142px;
            display: block;
            padding: 3px;
            margin: 0px;
            background-color: #FFFFFF;
            cursor: pointer;
            border: 1px solid white;
        }
        .button:hover
        {
            -webkit-border-radius: 4px;
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F8FE), to(#D3E3F7));
            border: 1px solid #D3E3F7;
        }
        .top
        {
            width: 142px;
            height: 20px;
            display: block;
            padding: 3px;
            margin: 0px 0px 3px 0px;
            background-color: #E5ECF9;
            border: 1px solid #D3E3F7;
            -webkit-border-radius: 0px 0px 5px 5px;
            -webkit-box-shadow: rgba(0, 0, 0, 0.292969) 0px 1px 3px;
        }
        .top:hover
        {
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F8FE), to(#D3E3F7));
            border: 1px solid #D3E3F7;
        }
        #pref
        {
            width: 16px;
            height: 16px;
            margin: 0px;
            cursor: pointer;
            vertical-align: middle;
            float: right;
        }
        #pref:hover
        {
            opacity: .6;
        }
        #real
        {
            width: 500px;
            display: none;
        }
        form.box
        {
            font-size: 15px;
            margin: 0px;
            width: 100%;
        }
        .input
        {
            width: 500px;
            height: 60px;
            padding-left: 2px;
            margin-bottom: 1px;
            border: 1px solid #999;
            border-top-color: #000;
            border-bottom-color: #ccc;
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(white));
            resize: vertical;
            cursor: text;
            opacity: 1.0;
            -webkit-box-shadow: rgba(0, 0, 0, 0.292969) 0px 1px 1px;
        }
        #swap
        {
            width: 16px;
            height: 16px;
            margin: 0px 3px 0px 3px;
            cursor: pointer;
            vertical-align: middle;
            float: left;
        }
        #swap:hover
        {
            opacity: .6;
        }
        #results
        {
            padding: 10px;
            color: gray;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 20px;
            background-color: #F7F7F7;
            -webkit-border-radius: 0px 0px 5px 5px;
            -webkit-box-shadow: rgba(0, 0, 0, 0.292969) 0px 1px 3px;
            padding-top: 2px;
            width: 480px;
        }
        #dict_body
        {
            color: rgb(103, 103, 103);
            font-family: arial,sans-serif;
            font-size: 11px;
            font-weight: normal;
            margin-top: 10px;
        }
        #foot
        {
            color: rgb(103, 103, 103);
            vertical-align: middle;
            font-family: arial,sans-serif;
            font-size: 11px;
            text-align: center;
        }
        #foot img
        {
            vertical-align: middle;
            padding-left: 1px;
        }
        #opt
        {
            height: 20px;
            font-size: 8pt;
            background-color: #E5ECF9;
            padding: 4px;
            border: 1px solid #D3E3F7;
            -webkit-border-radius: 0px 0px 5px 5px;
            -webkit-box-shadow: rgba(0, 0, 0, 0.292969) 0px 1px 3px;
        }
        select
        {
            margin-top: 0px;
            font-size: 8pt;
            width: 94px;
            border: 1px solid #729FCF;
            -webkit-border-radius: 3px;
            background: #fff;
            padding: 0px;
            float: left;
        }
        .opt_button
        {
            margin-top: 0px;
            font-size: 8pt;
            width: 70px;
        }
    </style>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="popup.js"></script>
</head>
<body>
    <div id="menu">
        <div class="top">
            <select id="mainLang" class="opt_select" title="Change Main Language">
                <option value="en">English</option>
            </select><div id="pref" title="Preferences">
            </div>
        </div>
        <div class="button" title="Translate select text">
            Translate selected text</div>
        <div class="button" title="Translate full webpage" style="display: none;">
            Translate webpage</div>
        <div class="button" title="Real Time translation">
            Real Time</div>
    </div>
    <div id="real">
        <form class="box">
        <textarea class="input" id="source" name="text" wrap="SOFT" tabindex="0" dir=""></textarea><br>
        <div id="opt">
            <select class="opt_select" id="srcLang" title="Translate from Language">
                <option value="en">English</option>
            </select><div id="swap" title="Swap languages">
            </div>
            <select class="opt_select" id="realLang" title="Translate to Language">
                <option value="en">English</option>
            </select><div style="float: right;">
                <input class="opt_button" type="button" value="Translate" /></div>
        </div>
        </form>
        <div id="results">
            <div id="results_body">
            </div>
            <div id="dict_body">
            </div>
        </div>
        <div id="foot">
            Powered by
            <img src="http://www.google.com/uds/css/small-logo.png" /></div>
    </div>
</body>
</html>
